<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore();

// 菜单是否收起状态
const isCollapsed = computed(() => {
  return store.getters["webset/isCollapsed"];
});
</script>

<template>
  <div class="layout-logo" :class="isCollapsed ? 'logo-mini' : ''">
    <div class="logo-img">
      <img src="@/assets/layout_logo.png" class="logo" />
    </div>
  </div>
</template>

<style lang="less">
.layout-logo {
  width: 100%;
  border-bottom: @border-width-base dashed @border-color-split;
  .logo-img {
    width: 120px;
    overflow: hidden;
    margin: 0 auto;
    transition: all 0.15s linear;
    .logo {
      width: 120px;
    }
  }
}
.logo-mini {
  padding: 0 12px;
  .logo-img {
    width: 40px;
  }
}
</style>